import React, { Component } from 'react';
import "./index.css"

import {TabBar} from 'antd-mobile'
import { EditFill,AppOutline,ShopbagOutline,UserOutline } from 'antd-mobile-icons';
import {withRouter} from 'react-router-dom'

class index extends Component {
    constructor(props){
        super(props);
        this.state = {
            tabs: [
                {
                  key: '/index/home',
                  title: '首页',
                  icon: <AppOutline />
                },
                {
                  key: '/index/cate',
                  title: '分类',
                  icon: <EditFill />
                },
                {
                  key: '/index/gwc',
                  title: '购物车',
                  icon: <ShopbagOutline />
                },
                {
                  key: '/index/mine',
                  title: '我的',
                  icon: <UserOutline />
                },
            ]
        }
    }
    handleChange(key){
        this.props.history.push(key);
    }
    render() {
        return (
            <TabBar onChange={this.handleChange.bind(this)}>
                {
                    this.state.tabs.map(item => {
                        return (
                            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                        )
                    })
                }
            </TabBar>
        );
    }
}

export default withRouter(index);